<template>
  <nut-popup
    position="right"
    v-model:visible="modelValue"
    :style="{ height: '100vh', width: '90vw' }"
    pop-class="popup_right_select"
  >
    <view class="title">{{ selectedRightOption.title }}</view>
    <view class="content">
      <view
        v-for="(items, index) in selectedRightOption.list"
        :key="index"
        class="list"
      >
        <view class="list-cell" @click="items.open = !items.open">
          <nut-checkbox v-model="items.checked" label="复选框"
            >{{ items.name }}
          </nut-checkbox>
          <view class="list-cell-right">
            <view class="desc">{{ items.open ? "展开" : "关闭" }}</view>
            <nut-icon
              class="icon"
              size="8px"
              :name="items.open ? 'arrow-down' : 'arrow-up'"
              color="#CCCCCC"
            ></nut-icon>
          </view>
        </view>
        <view v-if="items.open" class="list-content">
          <view class="list-cell tagcell">
            <view v-for="(item, index) in items.list" :key="index" class="tag"
              >{{ item.name }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="submit">
      <nut-button
        class="button-select-right"
        type="primary"
        shape="square"
        color="#cccccc"
        @click="reset()"
        >重置</nut-button>
      <nut-button
        class="button-select-right"
        type="primary"
        shape="square"
        color="#DC2734"
        @click="handleSelect"
        >确定</nut-button>
    </view>
  </nut-popup>
</template>
<script lang='ts'>
export default {
  name: "yh_right_draw",

  props: {
    modelValue: {
      default: false,
    },
    selectedRightOption: {
      default: () => ({}),
    },
    reset: {
      default: function () {},
    },
    handleSelect: {
      default: function () {},
    },
  },
};
</script>
<style lang="scss">
</style>
